<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.mobile.all.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>

<body>

    <ul id="menu">
        <li>
            Reply
            <ul>
                <li> Reply to Sender</li>
                <li>Reply to All</li>
            </ul>
        </li>
        <li class="k-separator"></li>
        <li>Forward</li>
    </ul>
    <div id="diagram"></div>
    <script>
        var data = [{
            firsLastName: "Antonio Moreno",
            title: "Team Lead",
            colorScheme: "#1696d3",
            items: [{
                firsLastName: "Elizabeth Brown",
                title: "Design Lead",
                colorScheme: "#ef6944"
            }, {
                firsLastName: "Felipe Izquiedro",
                title: "Senior Developer",
                colorScheme: "#75be16"
            }
            ]
        }
        ];

        function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;

            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill: {
                    gradient: {
                        type: "linear",
                        stops: [{
                            color: dataItem.colorScheme,
                            offset: 0,
                            opacity: 0.5
                        }, {
                            color: dataItem.colorScheme,
                            offset: 1,
                            opacity: 1
                        }
                        ]
                    }
                }
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.firsLastName,
                x: 55,
                y: 20,
                fill: "#fff"
            }));

            g.append(new dataviz.diagram.TextBlock({
                text: dataItem.title,
                x: 55,
                y: 40,
                fill: "#fff"
            }));
            return g;
        }

        function createDiagram() {
            $("#diagram").kendoDiagram({
                dataSource: new kendo.data.HierarchicalDataSource({
                    data: data,
                    schema: {
                        model: {
                            children: "items"
                        }
                    }
                }),
                layout: {
                    type: "layered"
                },
                shapeDefaults: {
                    visual: visualTemplate
                },
                connectionDefaults: {
                    stroke: {
                        color: "#979797",
                        width: 2
                    }
                }
            });

            var diagram = $("#diagram").getKendoDiagram();
            diagram.bringIntoView(diagram.shapes);

            var contextDataItem;

            $("#menu").kendoContextMenu({
                target: "#diagram",
                filter: "g",
                open: function (e) {
                    if (e.event) {
                        try {
                            var shapes = diagram.shapes;
                            var connections = diagram.connections;

                            var point = diagram.documentToModel(new kendo.dataviz.diagram.Point(e.event.pageX, e.event.pageY));

                            //Cancel the menu opening when the target is a connection
                            for (var i = connections.length - 1; i >= 0; i--) {
                                if (connections[i].bounds().contains(point)) {
                                    e.preventDefault();
                                }
                            }
                            //Find the target shape
                            for (var i = shapes.length - 1; i >= 0; i--) {
                                if (shapes[i].bounds().contains(point)) {
                                    contextDataItem = shapes[i].dataItem;
                                    break;
                                }
                            }
                        } catch (e) {
                            alert(e);
                        }
                    }
                },
                select: function (e) {
                    var itemText = $(e.item).text();
                    alert(kendo.format("{0}: {1}", itemText, contextDataItem.firsLastName));
                }
            });
        }

        $(document).ready(createDiagram);
    </script>
</body>

</html>